<script setup lang="ts">
import { testAPI } from '@/api/modules/login';
import handleNumberStore  from '@/store/handleNumberStore'

import { storeToRefs } from 'pinia'

defineProps<{ msg: string }>()

// 定义数据及方法
const count = ref(3);
const fn = () => {
  count.value+=3;
}
// pinia 数据获取及方法调用
const handleNumber = handleNumberStore()
const {num,dbNum} = storeToRefs(handleNumber)
const add = () => {
  handleNumber.addNumber()
  console.log(num.value)
}
const reduce = () => {
  handleNumber.reduceNumber()
}

onMounted(async () => {
  // api调用
  try{
    const res = await testAPI();
    console.log(res.data)
  }catch(err){
    console.log(err)
  }
})

</script>

<template>
  <h1>{{ msg }}</h1>
  <p>{{ dbNum }}</p>
  <el-button type="primary" @click="add">++{{ num }}</el-button>
  <el-button type="danger" @click="reduce">--{{ num }}</el-button>
  <div class="card">
    <button type="button" @click="fn">count is {{ count }}</button>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
